<template>
    <div class="header">
        <div class="imgclass">
            <img src="../assets/img/logo.png" class="logo" alt="">
            <div>杭州交创科技发展有限公司</div>
        </div>
        <div class="right">
            <div v-for="item in tabList" class="itemclass">
                {{ item }}
            </div>
        </div>
    </div>
</template>

<script setup>
let tabList = ref(['首页', '公司简介', '主营业务', '核心能力', '实验平台', '投资者关系', '联系我们'])

</script>

<style lang="less" scoped>
.header {
    height: 80px;
    width: 100%;
    display: flex;
    padding: 0 40px;
    box-sizing: border-box;
    justify-content: space-between;

    .imgclass {
        width: 300px;
        align-items: center;
        font-size: 20px;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .logo {
            width: 71px;
            height: 40px;
        }
    }

    .right {
        display: flex;
        height: 100%;

        .itemclass {
            width: 120px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
    }
}</style>